<!doctype html><!--声明HTML文件-->
<html><!--根标签，网页的开始-->
 <head><!--给浏览器看的信息-->
  <meta charset="UTF-8"><!--编码格式为国际编码UTF-8-->
  <meta name="Author" content="潭州-乌拉老师">
  <meta name="Keywords" content=""><!--为搜索引擎提供关键字列表-->
  <meta name="Description" content=""><!--对网页的描述，给搜索引擎抓取-->
  <title>Document</title>
  <style type="text/css">
	*{margin:0;padding:0;}
	ul,ol{list-style:none;}
	a{text-decoration:none;}

	/* body{
		text-align:center;
	} */
	ul{
		width: 1000px;
		height: 500px;
		margin:auto;
		border:5px solid red;
		display:flex;
		 /* flex-direction:column;  */
		/*  flex-wrap:wrap;   */
		/* flex-flow:row nowrap; */
		/* justify-content:space-between; */
		/* align-items:center; */
		/* align-content:stretch; */
	}
	li{
		width: 100px;
		height: 100px;
		font-size:50px;
		text-align:center;
		line-height:100px;
		border:2px solid green;
	}
 	li:nth-child(3){
		/* order:2; */
		/* flex-grow:2; */
		/* flex-shrink:0; */
		/* flex-basis:500px; */
		/* flex:1 1 auto; */
		/* align-self:baseline; */
	}
	li:nth-child(4){
		/* order:-1; */
		/* flex-grow:1; */
		/* flex-shrink:0; */
	} 
  </style>
 </head>
 <body><!--可视化区域-->
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
	<!-- 弹性盒模型 -->
	<!--
		弹性盒模型项目属性：
			order   定义项目的排列顺序,默认都是0。可以负值
						值越小，排列越靠前。同值按顺序
			flex-grow   定义项目放大的比例，默认值是0（就算有剩余空间，就是不放大）
			子元素的尺寸 = 容器盒子的剩余空间 * （子元素的flex-grow的值/所有子元素flex-grow值总和）+原本的尺寸
			
			flex-shrink   定义项目的缩小比例  不能负值
				1			默认值为1（如果容器空间不足，项目会自动等比例缩小）
				0     该项目不缩小
			
			flex-basis   定义在分配主轴的多余空间之前，重新分配该项目的主轴空间
				px
				%
				auto   没有特定的宽度值.默认值
				content   
			
			flex   是flex-grow、flex-shrink和flex-basis简写属性
				flex:0 1 auto;
				flex:none;  =  flex: 0 0 auto;
				flex:auto;  =  flex: 1 1 auto;

			
			align-self   单独定义项目与交叉轴的对齐方式
				auto     默认值。继承容器的align-items对齐方式
				flex-start    起点对齐
				flex-end     终点对齐
				baseline     文本第一行基线对齐
				stretch      默认值。如果项目没有定义宽高或者宽高设置成auto，
							它会沿着交叉轴占满整个容器的宽度或者是高度

		弹性盒模型项目属性：
			order
			flex-grow
			flex-shrink
			flex-basis
			flex  复合属性
			align-self 
	-->
 </body>
</html><!--网页的结束-->
